//父组件
<template>
  <div class="app">
    <Category>
      <template #center >
        <h1>美食</h1>
        <ul>
          <li v-for="(item, index) in foodArr" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Didi.vue";

export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foodArr: ["火锅", "烧烤", "小龙虾", "牛排"],
      gameArr: ["LOL", "侠盗飞车", "红色警戒"],
      movieArr: ["《肖申克的救赎》", "《绿皮书》", "《阿甘正传》"],
    };
  },
};
</script>

<style>
.app {
  width: 800px;
  display: flex;
  margin: auto;
  justify-content: space-between;
}
</style>